<template>
  <div style="width: 99%;">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card class="realTimePosition">
          <div slot="header" class="clearfix">
            <span>实时定位</span>
          </div>
          <div id="container"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="realTimePosition">
          <div slot="header" class="clearfix">
            <span>车辆转速</span>
          </div>
          <el-row>
            <div id="vehicleSpeed"></div>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="realTimePosition">
          <div slot="header" class="clearfix">
            <span>电池温度/电压</span>
          </div>
          <el-row>
            <div id="vehicleBatteryTemperature"></div>
          </el-row>
          <el-row>
            <div id="vehicleBatteryVoltage"></div>
          </el-row>
        </el-card>
      </el-col>

    </el-row>

    <el-row :gutter="10">
      <el-col :span="8">
        <el-card class="realTimePosition">
          <div slot="header" class="clearfix">
            <span>车辆速度</span>
          </div>
          <el-row>
             <div id="vehicleSpeedLine"></div>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="2" v-for="(key,val) in vehicleData" v-bind:key="val">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span v-text="val"></span>
          </div>
          <div v-text="key">

          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
var mapGaoDe = null , marker = null;
import { getVehicleDataByVin } from './api'

export default {
  name: 'real_info',
  data:function() {
    return {
      vin: "",
      map: null,
      timer: null,
      vehicleData: { },
      vehicleDataHead:{
        latitude:"",
        longitude:"",
        speed:"",
        voltage:"",
        temperature:"",
      },
      vehicleSpeedEcharts : null,
      vehicleSpeedOptions : null,
      vehicleSpeedLineEcharts : null,
      vehicleSpeedLineOptions : null,
      vehicleBatteryTemperatureEcharts : null,
      vehicleBatteryTemperatureOptions : null,
      vehicleBatteryVoltageEcharts : null,
      vehicleBatteryVoltageOptions : null,
    };
  },
  created: function() {
    window.onLoad = function() {
      //所有关于地图的逻辑全部都在这个回调里面，
      // 保证高德地图加载完毕
      mapGaoDe = new AMap.Map("container", {
        center: [116.400274, 39.905812],
        zoom: 14,
        viewMode: '3D',
        resizeEnable: true,
      });

      // 缩放地图到合适的视野级别
      mapGaoDe.setFitView()
    };
    // 加载高德地图库
    var webapi = document.createElement("script");
    webapi.src = `https://webapi.amap.com/maps?v=2.0&key=2133ec955e1135c305be7c1c729497ba&plugin=AMap.PolygonEditor&callback=onLoad`;
    // 将api文件引入到页面中，加载完毕以后就会回调函数 onLoad
    document.head.appendChild(webapi);
    var jsapi_demos = document.createElement("script");
    jsapi_demos.src = `https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js`;
    document.head.appendChild(jsapi_demos);
    this.vin = this.$route.query.vin;
  },
  mounted() {
      this.initLocus()
  },
  beforeDestroy() {
	  console.log('beforeDestroy', '销毁前');
	  this.closeLocus();
  },
  methods: {
    closeLocus(){
      clearInterval(this.timer);
      this.timer = null;
    },
    initLocus(){
      this.initVehicleSpeed();
      this.initVehicleBatteryTemperature();
      this.initVehicleBatteryVoltage();
      this.timer = setInterval(this.startTiming, 1000);
    },
    startTiming(){

      getVehicleDataByVin(this.vin).then(response => {
        var data = response.data;
        if (data != undefined && Object.keys(data).length !== 0 ){
          var latitude=data["latitude"];
          var longitude=data["longitude"];
          var speed=data["speed"];
          var voltage=data["voltage"];
          var temperature=data["singleBatteryMinTemperature"];
          
          if (marker == null){
            marker = new AMap.Marker({
              icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
              position: [116.406315,39.908775],
              offset: new AMap.Pixel(-13, -30)
            });
            marker.setMap(mapGaoDe);
          }
          if (latitude && longitude) {
            marker.setPosition([longitude,latitude]);
            mapGaoDe.setCenter([longitude,latitude]);
          }

          // 车速
          this.vehicleSpeedOptions.series[0].data[0].value = speed;
          this.vehicleSpeedEcharts.setOption(this.vehicleSpeedOptions);

          this.vehicleSpeedLineOptions.series[0].data.push(speed);
          this.vehicleSpeedLineEcharts.setOption(this.vehicleSpeedLineOptions);
          // 电池温度
          this.vehicleBatteryTemperatureOptions.series[0].data.push(temperature);
          this.vehicleBatteryTemperatureEcharts.setOption(this.vehicleBatteryTemperatureOptions);
          // 电池电压
          this.vehicleBatteryVoltageOptions.series[0].data.push(voltage);
          this.vehicleBatteryVoltageEcharts.setOption(this.vehicleBatteryVoltageOptions);
          this.keyDelete(data , "latitude");
          this.keyDelete(data , "longitude");
          this.keyDelete(data , "speed");
          this.keyDelete(data , "voltage");
          this.keyDelete(data , "singleBatteryMinTemperature");
          this.vehicleData = data;
        }

      })
      
    },
    keyDelete(keyValues , key){
      for (var k in keyValues) {
        if(k==key){
          delete keyValues[k]

        }
        this.keyValues=keyValues
        this.$forceUpdate();
      }
    },
    initVehicleSpeed(){
      // 基于准备好的dom，初始化echarts实例
      this.vehicleSpeedEcharts = this.$echarts.init(document.getElementById('vehicleSpeed'))
      this.vehicleSpeedOptions = {
        series: [{
          type: 'gauge',
          max:280,
          axisLine: {
            lineStyle: {
              width: 10,
              color: [
                [0.25, '#67e0e3'],
                [0.5, '#37a2da'],
                [0.75, '#0060c3'],
                [1, '#c30000']
              ]
            }
          },
          pointer: {
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            distance: -10,
            length: 8,
            lineStyle: {
              color: '#fff',
              width: 2
            }
          },
          splitLine: {
            distance: -10,
            length: 10,
            lineStyle: {
              color: '#fff',
              width: 4
            }
          },
          axisLabel: {
            color: 'auto',
            distance: 30,
            fontSize: 20
          },
          detail: {
            valueAnimation: true,
            formatter: '{value} km/h',
            color: 'auto'
          },
          data: [{
            value: 70
          }]
        }]
      };
      // 绘制图表
      this.vehicleSpeedEcharts.setOption(this.vehicleSpeedOptions);

      this.vehicleSpeedLineEcharts = this.$echarts.init(document.getElementById('vehicleSpeedLine'))
      console.log('aa', this.vehicleSpeedLineEcharts)
      this.vehicleSpeedLineOptions = {
        title: {
          text: '车辆速度',
          axisLabel: {
            formatter: '{value} ℃'
          },
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [],
          type: 'line'
        }]
      };
      this.vehicleSpeedLineEcharts.setOption(this.vehicleSpeedLineOptions);
    },

    initVehicleBatteryTemperature(){
      // 基于准备好的dom，初始化echarts实例
      this.vehicleBatteryTemperatureEcharts = this.$echarts.init(document.getElementById('vehicleBatteryTemperature'))
      this.vehicleBatteryTemperatureOptions = {
        title: {
          text: '电池温度',
          axisLabel: {
            formatter: '{value} ℃'
          },
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [],
          type: 'bar'
        }]
      };
      // 绘制图表
      this.vehicleBatteryTemperatureEcharts.setOption( this.vehicleBatteryTemperatureOptions );
    },
    initVehicleBatteryVoltage(){
      // 基于准备好的dom，初始化echarts实例
      this.vehicleBatteryVoltageEcharts = this.$echarts.init(document.getElementById('vehicleBatteryVoltage'))
      this.vehicleBatteryVoltageOptions = {
        title: {
          text: '电池电压',
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} V'
          },
        },
        series: [{
          data: [],
          type: 'bar'
        }]
      }
      // 绘制图表
      this.vehicleBatteryVoltageEcharts.setOption( this.vehicleBatteryVoltageOptions )
    },
  },
}
</script>

<style scoped>
@import "https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css";
#app {
    background-color: #ebf1f6;
    height: 2000px;
}
#container {
  width: 100%;
}
#container{
}
#vehicleSpeed{
  height: 40vh;
  width: 100%;
}
#vehicleSpeedLine{
  height: 30vh;
  width: 100%;
}
#vehicleBatteryTemperature{
  height: 20vh;
  width: 100%;
}
#vehicleBatteryVoltage{
  height: 20vh;
  width: 100%;
}
.box-card{
  margin: 5px;
}
.amap-icon img {
  width: 25px;
  height: 34px;
}
</style>
